<template>
  <div class="singer">
<!--    歌手查询-->
    <div>
      <div class="area common">
        <span class="title">语种:</span>
        <span class="item"
              @click="changeIndex1(index)"
              :class="{active:currentIndex1 === index}"
              v-for="(item, index) in singerArea"
              :key="index">
        {{item.info}}
      </span>
      </div>
      <div class="type common">
        <span class="title">分类:</span>
        <span class="item"
              @click="changeIndex2(index)"
              :class="{active:currentIndex2 === index}"
              v-for="(item, index) in singerType"
              :key="index">
        {{item.info}}
      </span>
      </div>
      <div class="initial common">
        <span class="title">筛选:</span>
        <span class="item"
              @click="hotClick"
              :class="{active:currentIndex3 === -1}">
        热门
      </span>
        <span class="item"
              @click="changeIndex3(item, index)"
              :class="{active:currentIndex3 === index}"
              v-for="(item, index) in singerInitial"
              :key="index">
        {{item}}
      </span>
      </div>
    </div>
<!--    歌手-->
    <div class="singer_box">
      <div class="singer_info" v-for="(item, index) in singers" :key="index">
        <img v-lazy="item.img1v1Url" @click="goRoute(item)" alt="">
        <div>{{item.name}}</div>
      </div>
    </div>
<!--分页-->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="30"
      :total="total"
      @current-change="handleCurrentChange">
    </el-pagination>

  </div>
</template>

<script>
  import {home} from "@/network/home";

  export default {
    name: "Singer",
    data(){
      return {
        singerArea:[            //语种
          {info:'全部',id:-1},
          {info:'华语',id:7},
          {info:'欧美',id:96},
          {info:'日本',id:8},
          {info:'韩国',id:16},
          {info:'其他',id:0}
        ],
        singerType:[            //类型
          {info:'全部',id:-1},
          {info:'男歌手',id:1},
          {info:'女歌手',id:2},
          {info:'乐队',id:3}
        ],
        singerInitial:[         //字母
          'A','B','C','D','E','F','G','H','I','J','K','l','M','N','O','P',
          'Q','R','S','T','U','V','W','X','Y','Z'
        ],
        type:'-1',        //参数1（类型）
        area:'-1',        //参数2（语种）
        initial:'-1',     //参数3（字母）
        currentIndex1:0,   //当前索引
        currentIndex2:0,   //当前索引
        currentIndex3:-1,   //当前索引
        singers:[],         //请求过来的歌手信息
        currentPage:0,      //当前页
        total:1000,         //歌手总数（因请求的数据获取不到总数就赋个静态值）
      }
    },
    created() {
      this.getSingerCat(this.type, this.area, this.initial)
    },
    methods:{
      //点击标签的方法
      changeIndex1(index){
        // 1.改变按钮样式
        this.currentIndex1 = index
        // 2.更新歌手列表
        this.area = this.singerArea[index].id
        this.getSingerCat(this.type,this.area,this.initial,this.currentPage * 30)
      },
      changeIndex2(index){
        this.currentIndex2 = index
        this.type = this.singerType[index].id
        this.getSingerCat(this.type,this.area,this.initial,this.currentPage * 30)
      },
      changeIndex3(item, index){
        this.currentIndex3 = index
        this.initial = item
        this.getSingerCat(this.type,this.area,this.initial,this.currentPage * 30)
      },
      hotClick(){
        this.currentIndex3 = -1
        this.initial = -1
        this.getSingerCat(this.type,this.area,this.initial,this.currentPage * 30)
      },
      //切换分页的方法
      handleCurrentChange(newPage){
        this.currentPage = newPage - 1
        this.getSingerCat(this.type,this.area,this.initial,this.currentPage * 30)
      },
      //点击歌手图片跳转到歌手详情页
      goRoute(item){
        this.$router.push('/singer/' + item.id)
      },



      //获取歌手分类的函数
      getSingerCat(type, area, initial, offset){
        home.getSingerCat(type, area, initial, offset).then(res => {
          this.singers = res.data.artists
        })
      },
    },
  }
</script>

<style scoped>
/*这个路由的视图有点奇怪，尚未用更好的办法解决*/
.singer{
  position: fixed;
  width: 88.4%;
  height: calc(100% - 41px - 100px);
}
.common{
  height: 35px;
  line-height: 35px;
}
.title{
  color: #938de0;
}
.title,.item{
  font-size: 13px;
}
.item{
  padding: 3px 12px;
  margin-left: 3px;
  border-radius: 10px;
  cursor: pointer;
  transition: .25s;
}
.item:hover{
  color: #938de0;
  background-color: rgba(0,0,0,.1);
}
.active{
  color: #a6a6b3;
  background-color: rgba(0,0,0,.1);
}
/*歌手信息*/
.singer_box{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding-bottom: 30px;
}
.singer_info{
  width: 150px;
  height: 180px;
  margin: 10px;
  text-align: center;
}
.singer_info div{
  font-size: 14px;
  line-height: 30px;
}
.singer_box img{
  width: 150px;
  height: 150px;
  border-radius: 5px;
  cursor: pointer;
}
/*分页按钮样式*/
/deep/ .el-pagination{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}

</style>
